<template>
  <div class="blood-collection-system">
    <!-- 大屏显示界面 -->
    <div class="display-screen">
      <div class="header">
        <h1>医院采血排队叫号系统</h1>
        <div class="current-date">{{ currentDate }}</div>
        <div class="current-time">{{ currentTime }}</div>
      </div>

      <div class="calling-info">
        <div class="calling-station" v-for="station in stations" :key="station.id">
          <h2>{{ station.winName }}</h2>
          <div class="called-number" v-if="station.isEnable==1">
            {{ station.currentBussinessNo || '---' }}
          </div>
          <div class="called-number" style="color:#e6a23c" v-if="station.isEnable==2">
            暂停
          </div>
          <div class="called-number" style="color:#f56c6c" v-if="station.isEnable==0">
            关闭
          </div>
          <div class="waiting-info">
            等候人数: {{ getWaitingCount(station.winCode) }}人
          </div>
        </div>
      </div>

      <div class="waiting-queue">
        <h2>等候队列</h2>
        <div class="queue-columns">
          <div class="queue-column" v-for="station in stations" :key="station.id">
            <h3>{{ station.winName }}</h3>
            <div class="queue-numbers">
              <div v-for="patient in getStationQueue(station.winCode).slice(0, 10)" :key="patient.businessNo" class="queue-number">
                {{ patient.businessNo+"-"+patient.userName }}
              </div>
              <div v-if="getStationQueue(station.winCode).length > 10" class="more-patients">
                ...还有{{ getStationQueue(station.winCode).length - 10 }}位
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-message">
        <!-- <marquee behavior="scroll" direction="left">
          温馨提示：请留意叫号信息，过号请重新取号。空腹采血患者请提前告知医护人员。
        </marquee> -->
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { initWebSocket } from '@/utils/websocket';
import axios from 'axios';



export default {
  setup() {
    // 系统模式：护士操作模式/大屏显示模式

    // 采血窗口设置
    const stations = ref([]);

    // 患者队列
    const patientsQueue = ref([]);

    // 当前叫号的患者
    const currentCalledPatient = ref(null);

    // 当前日期和时间
    const currentDate = ref('');
    const currentTime = ref('');

    // 更新当前时间
    const updateTime = () => {
      const now = new Date();
      currentDate.value = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        weekday: 'long'
      });
      currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
    };

    // 定时器
    let timer;

    onMounted(() => {
      // updateTime();
      timer = setInterval(updateTime, 1000);

      // 模拟初始数据
      // setTimeout(() => {
      //   patientsQueue.value = [
      //     { number: 'A001', stationId: 1, timestamp: Date.now() - 15 * 60 * 1000 },
      //     { number: 'A002', stationId: 1, timestamp: Date.now() - 10 * 60 * 1000 },
      //     { number: 'A003', stationId: 1, timestamp: Date.now() - 5 * 60 * 1000 },
      //     { number: 'B001', stationId: 2, timestamp: Date.now() - 12 * 60 * 1000 },
      //     { number: 'B002', stationId: 2, timestamp: Date.now() - 8 * 60 * 1000 },
      //     { number: 'V001', stationId: 4, timestamp: Date.now() - 20 * 60 * 1000, isVip: true },
      //     { number: 'A004', stationId: 1, timestamp: Date.now() - 2 * 60 * 1000 },
      //     { number: 'B003', stationId: 2, timestamp: Date.now() - 3 * 60 * 1000 },
      //     { number: 'C001', stationId: 3, timestamp: Date.now() - 18 * 60 * 1000 },
      //   ];
      // }, 500);
      initWebSocket(getQueenLists);
      getWindow();
      getBusiness();
    });

    function getWindow() {
      axios.get(window.apiUrl.VITE_SERVER_URL + '/callNum/bigScreenGetWindow')
        .then(response => {
          stations.value = response.data.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
    function getBusiness() {
      axios.get(window.apiUrl.VITE_SERVER_URL + '/callNum/bigScreenGetBusiness', { params: { state: 5 } })
        .then(response => {
          patientsQueue.value = response.data.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }

    function getQueenLists(data) {
      if (data.type == 'getNum') {
        patientsQueue.value.push(JSON.parse(data.message));
      } if (data.type == 'nurseCallNum') {
        const datas = JSON.parse(data.message);
        console.log(datas);
        const indexs = patientsQueue.value.findIndex(p => p.businessNo == datas.businessNo);
        patientsQueue.value.splice(indexs, 1);
        stations.value.forEach(element => {
          if (element.winCode == datas.winCode) {
            element.currentBussinessNo = datas.businessNo;
          }
        });
      }
      if (data.type == 'pauseWindow') {
        stations.value.forEach(element => {
          if (element.winCode == data.message) {
            element.isEnable = 2;
          }
        });
      }
      if (data.type == 'startWindow' || data.type == 'openWindow') {
        stations.value.forEach(element => {
          if (element.winCode == data.message) {
            element.isEnable = 1;
          }
        });
      }
      if (data.type == 'closeWindow') {
        getWindow();
        getBusiness();
      }
    }

    onBeforeUnmount(() => {
      clearInterval(timer);
    });

    // 获取当前窗口叫号
    const getCurrentCalledNumber = (winCode) => {
      const called = patientsQueue.value.find(p =>
        p.winCode === winCode
      );
      return called ? called.businessNo : null;
    };

    // 获取窗口等候人数
    const getWaitingCount = (winCode) => {
      return patientsQueue.value.filter(p =>
        p.winCode === winCode
      ).length;
    };

    // 获取窗口队列
    const getStationQueue = (winCode) => {
      return patientsQueue.value
        .filter(p => p.winCode === winCode)
        .sort((a, b) => a.reqTime - b.reqTime);
    };

    return {
      stations,
      patientsQueue,
      currentCalledPatient,
      currentDate,
      currentTime,
      getCurrentCalledNumber,
      getWaitingCount,
      getStationQueue,
    };
  }
};
</script>

<style scoped>
.blood-collection-system {
  font-family: 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

/* 护士操作面板样式 */
.nurse-panel {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.control-panel {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.station-select select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.call-button,
.recall-button,
.skip-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.call-button {
  background-color: #4caf50;
  color: white;
}

.recall-button {
  background-color: #2196f3;
  color: white;
}

.skip-button {
  background-color: #f44336;
  color: white;
}

.call-button:hover {
  background-color: #45a049;
}

.recall-button:hover {
  background-color: #0b7dda;
}

.skip-button:hover {
  background-color: #da190b;
}

.current-patient {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.patient-info {
  font-size: 18px;
}

.highlight {
  font-weight: bold;
  color: #22c3dc;
  font-size: 20px;
}

.queue-list table {
  width: 100%;
  border-collapse: collapse;
}

.queue-list th,
.queue-list td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.queue-list th {
  background-color: #4caf50;
  color: white;
}

.queue-list tr:nth-child(even) {
  background-color: #f2f2f2;
}

.queue-list tr:hover {
  background-color: #ddd;
}

/* 大屏显示样式 */
.display-screen {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  background-color: #22c3dc;
  color: white;
  padding: 15px;
  border-radius: 5px;
}

.header h1 {
  margin: 0;
  font-size: 32px;
}

.current-date,
.current-time {
  font-size: 24px;
  margin-top: 10px;
}

.calling-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.calling-station {
  text-align: center;
  padding: 0 20px;
}

.calling-station h2 {
  color: #22c3dc;
  margin-bottom: 10px;
}

.called-number {
  font-size: 36px;
  font-weight: bold;
  color: #22c3dc;
  margin: 10px 0;
  min-height: 50px;
}

.waiting-info {
  font-size: 18px;
  color: #666;
}

.waiting-queue {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.waiting-queue h2 {
  text-align: center;
  color: #22c3dc;
  margin-bottom: 20px;
}

.queue-columns {
  display: flex;
  justify-content: space-around;
}

.queue-column {
  flex: 1;
  padding: 0 15px;
}

.queue-column h3 {
  text-align: center;
  color: #333;
  border-bottom: 2px solid #22c3dc;
  padding-bottom: 10px;
}

.queue-numbers {
  min-height: 200px;
}

.queue-number {
  font-size: 20px;
  margin: 8px 0;
  padding: 5px;
  background-color: #f5f5f5;
  text-align: center;
  border-radius: 3px;
}

.more-patients {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-top: 10px;
}

.footer-message {
  margin-top: 20px;
  background-color: #333;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.footer-message marquee {
  font-size: 18px;
}
</style>